<template>
	<view class="content-box">
		<view class="card">
			<view class="title">
				车辆信息
			</view>
			<view class="form-item">
				<view class="lable">
					汽车品牌
				</view>
				<view class="value">
					{{data.carBrand||''}} . {{data.carSeries||''}}
				</view>
			</view>
			<view class="form-item">
				<view class="lable">
					车牌号
				</view>
				<view class="value">
					{{data.licenseNumber||''}}
				</view>
			</view>
		</view>
		
		<view class="card" style="margin-top: 20rpx;">
			<view class="title">
				车辆照片
			</view>
			<view class="vehicle-photo">
				<image :src="$imageUrl(data.carPhoto)" mode=""></image>
			</view>
			<view class="title">
				行驶证照片
			</view>
			<view class="vehicle-photo">
				<image :src="$imageUrl(data.drivingLicense)" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{}
			}
		},
		onLoad() {
			this.$myRequest('/api/driver/mine/v1/carInfo').then(res=>{
				this.data=res.data
			})
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.content-box{
		background-color: #f5f5f5;
		min-height: calc(100vh - 40rpx);
		padding: 20rpx 0;
		.card{
			background-color: #ffffff;
			padding: 32rpx 0;
			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
				position: relative;
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				&:before {
					content: '';
					width: 12rpx;
					height: 24rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					background: $theme-color;
				}
			}
			.form-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 40rpx;
				font-size: 28rpx;
				.lable{
					color: #999999;
				}
				.value{
					color: #333333;
					font-weight: bold;
				}
			}
			.vehicle-photo{
				width: 316rpx;
				height: 238rpx;
				margin: 20rpx 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
</style>
